<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
      <el-form-item label="用户编号" prop="userId">
        <el-input v-model="queryParams.userId" placeholder="请输入用户编号" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="订单类型" prop="orderType">
        <el-select v-model="queryParams.orderType" placeholder="请选择订单类型">
          <el-option v-for="item in [
            { value: '1', label: '家政' },
            { value: '2', label: '开锁' },
            { value: '3', label: '团购' },
          ]" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="订单状态" prop="orderStatus">
        <el-select v-model="queryParams.orderStatus" placeholder="请选择订单状态">
          <el-option v-for="item in [
            { value: '0', label: '待支付' },
            { value: '99', label: '待派单' },
            { value: '1', label: '待出发' },
            { value: '2', label: '已出发' },
            { value: '3', label: '成果待确认' },
            { value: '4', label: '已完成' },
            { value: '11', label: '已取消' },
            { value: '22', label: '已追加' },
            { value: '33', label: '已售后' },
          ]" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="订单号" prop="orderCode">
        <el-input v-model="queryParams.orderCode" placeholder="请输入订单号" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <!-- <el-form-item label="地址编号" prop="addrId">
				<el-input v-model="queryParams.addrId" placeholder="请输入地址编号" clearable
					@keyup.enter.native="handleQuery" />
			</el-form-item> -->
      <!-- <el-form-item label="服务时间段" prop="timePeriod">
        <el-input
          v-model="queryParams.timePeriod"
          placeholder="请输入服务时间段"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item> -->
      <!-- <el-form-item label="优惠券编号" prop="coupId">
				<el-input v-model="queryParams.coupId" placeholder="请输入优惠券编号" clearable
					@keyup.enter.native="handleQuery" />
			</el-form-item> -->
      <!-- <el-form-item label="支付方式  1微信" prop="payMethod">
				<el-input v-model="queryParams.payMethod" placeholder="请输入支付方式  1微信" clearable
					@keyup.enter.native="handleQuery" />
			</el-form-item> -->
      <el-form-item label="订单金额" prop="orderPrice">
        <el-input v-model="queryParams.orderPrice" placeholder="请输入订单金额" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <!-- <el-form-item label="商户ID" prop="merchId">
				<el-input v-model="queryParams.merchId" placeholder="请输入商户ID" clearable
					@keyup.enter.native="handleQuery" />
			</el-form-item> -->
      <el-form-item label="是否支付" prop="payStatus">
        <el-select v-model="queryParams.payStatus" placeholder="请选择">
          <el-option v-for="item in [
            { value: '1', label: '已支付' },
            { value: '0', label: '未支付' },
          ]" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <!-- <el-col :span="1.5">
				<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
					v-hasPermi="['system:order:add']">新增</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
					v-hasPermi="['system:order:edit']">修改</el-button>
			</el-col> -->
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
          v-hasPermi="['system:order:remove']">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
          v-hasPermi="['system:order:export']">导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="orderList" @selection-change="handleSelectionChange"
      :tree-props="{ children: 'orderDetails', hasChildren: 'hasChildren' }">
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-table :data="scope.row.orderDetails" align="center">
            <el-table-column label="商品名称">
              <template slot-scope="{ row }">
                <span>{{ row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="价格">
              <template slot-scope="{ row }">
                <span>{{ row.price }}</span>
              </template>
            </el-table-column>
            <el-table-column label="数量">
              <template slot-scope="{ row }">
                <span>{{ row.buyCount }}</span>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="编号" align="center" prop="id" width="55" />
      <el-table-column label="订单号" align="center" prop="orderCode" />
      <el-table-column label="下单时间" align="center" prop="createTime" width="160" />
      <el-table-column label="用户昵称" align="center" width="80">
        <template slot-scope="scope" v-if="scope.row.user && scope.row.user.userName">{{ scope.row.user.userName
          }}</template>
        <template v-else>暂无</template>
      </el-table-column>
      <el-table-column label="收货地址" align="center" width="200">
        <template slot-scope="scope" v-if="scope.row.orderType != 3">
          <div>
            {{ scope.row.userAddr.userAddr }} -
            {{ scope.row.userAddr.houseNumber }}
          </div>
          <div>
            {{ scope.row.userAddr.realName }} - {{ scope.row.userAddr.phone }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="服务时间段" align="center" prop="timePeriod" />
      <el-table-column label="优惠券名称" align="center" prop="coupon.name" />
      <el-table-column label="优惠券类型" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.coupon && scope.row.coupon.conpType == 1">满减券</span>
          <span v-if="scope.row.coupon && scope.row.coupon.conpType == 2">折扣券</span>
          <span v-if="scope.row.coupon && scope.row.coupon.conpType == 3">体验券</span>
        </template>
      </el-table-column>

      <el-table-column label="优惠券设置" align="center" width="180">
        <template slot-scope="scope">
          <span v-if="scope.row.coupon && scope.row.coupon.conpType == 1">
            消费券满{{ scope.row.coupon.conpTextObject.fullAmount }}，立减{{ scope.row.coupon.conpTextObject.deductionAmount
            }}元
          </span>
          <span v-if="scope.row.coupon && scope.row.coupon.conpType == 2">
            折扣券{{ scope.row.coupon.conpTextObject.discount }}折，最大抵扣{{ scope.row.coupon.conpTextObject.maxReduction }}元
          </span>
          <span v-if="scope.row.coupon && scope.row.coupon.conpType == 3">
            无门槛
          </span>
        </template>
      </el-table-column>

      <!-- <el-table-column label="支付方式  1微信" align="center" prop="payMethod" /> -->
      <el-table-column label="支付状态" align="center">
        <template slot-scope="scope">
          <el-tag type="danger" size="mini" v-if="scope.row.payStatus == 0">未支付</el-tag>
          <el-tag type="success" size="mini" v-if="scope.row.payStatus == 1">已支付</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="追加服务状态" align="center">
        <template slot-scope="scope">
          <el-tag type="info" size="mini" v-if="scope.row.orderAppend == null">无追加服务</el-tag>
          <el-tag type="" size="mini" v-else>已追加服务</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="订单金额" align="center" prop="orderPrice" />
      <el-table-column label="订单类型" align="center">
        <template slot-scope="scope">
          <el-tag type="warning" size="mini" v-if="scope.row.orderType == 1">家政</el-tag>
          <el-tag type="danger" size="mini" v-if="scope.row.orderType == 2">开锁</el-tag>
          <el-tag type="success" size="mini" v-if="scope.row.orderType == 3">团购</el-tag>
        </template>
      </el-table-column>
      <!-- <el-table-column label="商户ID" align="center" prop="merchId" /> -->
      <!-- <el-table-column label="支付时间" align="center" prop="payTime" /> -->
      <el-table-column label="订单状态" align="center">
        <template slot-scope="scope">
          <el-tag size="mini">{{ orderStatus[scope.row.orderStatus] }}</el-tag>
        </template>
      </el-table-column>
      <!-- <el-table-column label="备注" align="center" prop="remark">
        <template slot-scope="scope">
          <el-popover
            placement="bottom"
            title="备注"
            width="200"
            trigger="click"
            :content="scope.row.remark"
          >
            <p class="desc_p" slot="reference">{{ scope.row.remark }}</p>
          </el-popover>
        </template>
      </el-table-column> -->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)">查看</el-button>
          <el-button size="mini" type="text" v-if="
            scope.row.orderStatus == 1 &&
            !scope.row.merchId &&
            scope.row.orderType != 3
          " @click="handleDistribution(scope.row)">分配商户</el-button>
          <!-- <el-button
            size="mini"
            type="text"
            v-if="scope.row.orderAppend"
            @click="handleAppend(scope.row)"
            >追加服务</el-button
          > -->
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
            v-hasPermi="['system:order:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <!-- 添加或修改服务订单对话框 -->
    <el-dialog title="订单详情" :visible.sync="open" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-tag v-if="form.orderStatus == 11" type="info">订单已取消</el-tag>
        <el-steps v-if="form.orderType != 3" :space="200" :active="orderFlows.length" finish-status="success">
          <el-step v-for="(item, index) in myorderFlows" :key="index" :title="orderStatus[item.orderStatus]"
            :description="item.updateTime"></el-step>
        </el-steps>
        <el-steps v-if="form.orderType == 3" :space="200" :active="orderFlows.length" finish-status="success">
          <el-step v-for="(item, index) in myorderFlows2" :key="index" :title="orderStatus2[item.orderStatus]"
            :description="item.updateTime"></el-step>
        </el-steps>
        <div style="display: flex; justify-content: space-between" class="mt10">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>订单信息</span>
            </div>
            <div class="item">
              <span>订单号:{{ form.orderCode }}</span>
            </div>
            <div class="item">
              <span>订单状态:{{ orderStatus[form.orderStatus] }}</span>
            </div>
            <div class="item" v-if="form.coupon">
              <span>优惠券名称:{{ form.coupon.name }}</span>
            </div>
            <div class="item" v-if="form.coupon">
              <!-- <span>优惠券类型:{{ form.payMethod }}</span> -->
              <span v-if="form.coupon.conpType == 1">优惠券类型: 满减券</span>
              <span v-if="form.coupon.conpType == 2">优惠券类型: 折扣券</span>
              <span v-if="form.coupon.conpType == 3">优惠券类型: 体验券</span>
            </div>
            <div class="item" v-if="form.coupon">
              <span v-if="form.coupon.conpType == 1">优惠券设置:{{ form.coupon.conpTextObject.fullAmount }}满减{{ form.coupon.conpTextObject.deductionAmount }}元</span>
              <span v-if="form.coupon.conpType == 2">优惠券设置:{{ form.coupon.conpTextObject.discount }}折，最大抵扣{{ form.coupon.conpTextObject.maxReduction }}元</span>
              <span v-if="form.coupon.conpType == 3">优惠券设置:无门槛</span>
            </div>
            <div class="item">
              <span>支付时间:{{ form.payTime }}</span>
            </div>

            <div class="item">
              <span>订单金额:{{ form.orderPrice }}</span>
            </div>
            <div class="item">
              <span>购买人:{{ users && users.userName ? users.userName : '暂无' }}</span>
            </div>
            <div class="item">
              <span>预订人:{{ form.dueName }}</span>
            </div>
            <div class="item">
              <span>电话:{{ form.duePhone }}</span>
            </div>
          </el-card>

          <el-card class="box-card" v-if="form.orderType != 3 && userAddr != null">
            <div slot="header" class="clearfix">
              <span>用户信息</span>
            </div>
            <div class="item">
              <span>联系人:{{ userAddr.realName }}</span>
            </div>
            <div class="item">
              <span>电话:{{ userAddr.phone }}</span>
            </div>
            <div class="item">
              <span>地址:{{ userAddr.userAddr }} - {{ userAddr.houseNumber }}</span>
            </div>
            <div class="item">
              <span>期望时间:{{ form.timePeriod }}</span>
            </div>
          </el-card>
        </div>
        <div style="display: flex; justify-content: space-between" class="mt10">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>商品信息</span>
            </div>
            <div class="item" v-if="form.orderType == 1">
              <span>商品类型:家政-{{ orderPro.typeName }}-{{
                orderPro.proName
              }}</span>
            </div>
            <div class="item" v-if="form.orderType == 2">
              <span>商品类型:开锁-{{ orderPro.proName }}</span>
            </div>
            <div v-for="(item, index) in orderDetails" :key="index">
              <div class="item" v-if="form.orderType != 3">
                <span>商品规格:{{ item.name }}</span>
              </div>
              <div class="item">
                <span>商品名称:{{ orderPro.proName }}</span>
              </div>
              <div class="item">
                <span>商品价格:{{ item.price }}</span>
              </div>
              <div class="item">
                <span>购买数量:{{ item.buyCount }}</span>
              </div>
              <div class="item">
                <span>小计金额:{{ item.price * item.buyCount }}</span>
              </div>
            </div>
          </el-card>
          <el-card class="box-card" v-if="provider != null && form.orderType != 3">
            <div slot="header" class="clearfix">
              <span>商家信息</span>
            </div>
            <div class="item">
              <span>商家名称:{{ provider.account }}</span>
            </div>
            <div class="item">
              <span>预计上门时间:{{ form.estimateTime }}</span>
            </div>
            <div class="item">
              <span>联系人姓名:{{ provider.provName }}</span>
            </div>
            <div class="item">
              <span>联系人电话:{{ provider.phone }}</span>
            </div>
          </el-card>
        </div>
        <div style="display: flex; justify-content: space-between" class="mt10">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>核销信息</span>
            </div>
            <div v-for="(item, index) in orderSaleVolumes" :key="index">
              <div class="item">
                <span>核销门店:{{ item.storeName }}</span>
              </div>
              <div class="item">
                <span>核销数量:{{ item.salesVolume }}</span>
              </div>
              <div class="item">
                <span>核销时间:{{ item.createTime }}</span>
              </div>
              <div class="item">
                <span>核销金额:{{ item.price }}</span>
              </div>
            </div>
          </el-card>
        </div>
      </el-form>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px" v-if="dialogType == 1">
        <el-card style="margin-top: 20px">
          <div slot="header" class="clearfix">
            <span>商户分配（派单）</span>
          </div>
          <el-form-item label="商户" prop="merchId" required>
            <el-select v-model="form.merchId" placeholder="请选择商户" filterable style="width: 100%">
              <el-option v-for="item in providerList" :key="item.id" :label="item.provName" :value="String(item.id)">
                <span>{{ item.provName }}</span>
                <span class="ml10">{{ item.liaison }}</span>
                <span class="ml10">{{ item.phone }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-card>
      </el-form>
      <div v-if="form.orderType != 3">
        <el-card style="margin-top: 20px">
          <div slot="header" class="clearfix">
            <span>服务成果</span>
          </div>
          <div class="mt10" v-if="form.sceneImages">
            <image-preview v-for="(item, index) in form.sceneImages.split(',')" :key="index" :src="api_host + item"
              :width="100" :height="100" />
          </div>
          <div v-else>
            <span>未上传服务成果</span>
          </div>
        </el-card>
      </div>
      <div class="" v-if="orderAppend != null && form.orderType != 3">
        <el-card style="margin-top: 20px">
          <div slot="header" class="clearfix">
            <span>追加服务</span>
          </div>
          <div>
            <span>追加订单号:{{ orderAppend.appendCode }}</span>
          </div>
          <div class="mt10">
            <span>追加金额:￥{{ orderAppend.price }}</span>
          </div>
          <div class="mt10">
            <span>追加内容：</span>
          </div>
          <div class="mt10">
            <span>{{ orderAppend.describe }}</span>
          </div>
          <div class="mt10" v-if="form.sceneImages">
            <image-preview v-for="(item, index) in form.sceneImages.split(',')" :key="index" :src="api_host + item"
              :width="100" :height="100" />
          </div>
        </el-card>
      </div>
      <div v-else>
        <el-card style="margin-top: 20px" v-if="form.orderType != 3">
          <div slot="header" class="clearfix">
            <span>追加服务</span>
          </div>
          <div>
            <span>无追加服务</span>
          </div>
        </el-card>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('1')">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listOrder,
  getOrder,
  delOrder,
  addOrder,
  updateOrder,
  getProvider,
} from "@/api/system/order";

export default {
  name: "Order",
  data() {
    return {
      dialogType: "", //1分配商户 2追加服务
      providerList: [],
      // orderStatus: {
      //   0: "未支付",
      //   1: "待出发",
      //   2: "待商户确认",
      //   3: "待用户确认",
      //   4: "已完成",
      //   11: "已取消",
      //   22: "售后",
      //   33: "售后完成",
      // },
      orderStatus: {
        0: "待支付",
        99: "待派单",
        1: "待出发",
        2: "已出发",
        3: "成果待确认",
        4: "已完成",
        11: "已取消",
        22: "已追加",
        33: "已售后",
      },
      myorderFlows: [
        //订单进度全流程
        { orderStatus: 0, updateTime: "" },
        { orderStatus: 99, updateTime: "" },
        { orderStatus: 1, updateTime: "" },
        { orderStatus: 2, updateTime: "" },
        { orderStatus: 3, updateTime: "" },
        { orderStatus: 4, updateTime: "" },
      ],
      orderStatus2: {
        0: "待支付",
        1: "待使用",
        4: "已完成",
      },
      myorderFlows2: [
        //订单进度全流程
        { orderStatus: 0, updateTime: "" },
        { orderStatus: 1, updateTime: "" },
        { orderStatus: 4, updateTime: "" },
      ],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 服务订单表格数据
      orderList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderCode: null,
        userId: null,
        addrId: null,
        timePeriod: null,
        coupId: null,
        payMethod: null,
        payStatus: null,
        orderPrice: null,
        orderType: null,
        merchId: null,
        orderStatus: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      users: {},
      userAddr: {},
      orderAppend: {},
      orderDetails: [],
      orderSaleVolumes: [], //核销信息
      orderPro: {},
      provider: {},
      orderFlows: [],
    };
  },
  created() {
    this.getList();
  },
  // mounted(){
  //   console.log(this.$route.query.id,123);
  //   const id = this.$route.query.id
  //   if(id){
  //     listOrder({coupId:id}).then((response) => {
  //       this.orderList = response.rows;
  //       this.total = response.total;
  //     });
  //   }
  // },
  methods: {
    /** 查询服务订单列表 */
    getList() {
      this.loading = true;
      listOrder(this.queryParams).then((response) => {
        this.orderList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        orderCode: null,
        userId: null,
        addrId: null,
        timePeriod: null,
        coupId: null,
        payMethod: null,
        payStatus: null,
        orderPrice: null,
        orderType: null,
        merchId: null,
        orderStatus: null,
        remark: null,
        createTime: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加服务订单";
    },
    /** 获取商户 */
    handleDistribution(row) {
      const id = row.id;
      getProvider(id).then((response) => {
        this.providerList = response.data;
        this.title = "分配商户";
        // this.handleUpdate(id);
        this.handleView(row);
        this.dialogType = 1;
      });
    },
    /** 修改按钮操作 */
    handleUpdate(id) {
      this.reset();
      getOrder(id).then((response) => {
        this.form = response.data;
        this.orderAppend = response.data.orderAppend;
        this.open = true;
      });
    },
    //查看订单详情
    handleView(row) {
      this.reset();
      this.dialogType = "";
      this.myorderFlows = [
        { orderStatus: 0, updateTime: "" },
        { orderStatus: 99, updateTime: "" },
        { orderStatus: 1, updateTime: "" },
        { orderStatus: 2, updateTime: "" },
        { orderStatus: 3, updateTime: "" },
        { orderStatus: 4, updateTime: "" },
      ];
      this.myorderFlows2 = [
        { orderStatus: 0, updateTime: "" },
        { orderStatus: 1, updateTime: "" },
        { orderStatus: 4, updateTime: "" },
      ];
      const id = row.id;
      getOrder(id).then((response) => {
        this.form = response.data;
        this.users = response.data.user;
        this.userAddr = response.data.userAddr;
        this.orderAppend = response.data.orderAppend;
        this.orderDetails = response.data.orderDetails;
        this.orderSaleVolumes = response.data.orderSaleVolumes;
        this.orderPro = response.data.orderPro;
        this.provider = response.data.provider;
        this.orderFlows = response.data.orderFlows;
        this.myorderFlows.forEach((item, index) => {
          response.data.orderFlows.forEach((item2) => {
            if (item.orderStatus == item2.orderStatus) {
              this.myorderFlows[index] = item2;
            }
          });
        });
        this.myorderFlows2.forEach((item, index) => {
          response.data.orderFlows.forEach((item2) => {
            if (item.orderStatus == item2.orderStatus) {
              this.myorderFlows2[index] = item2;
            }
          });
        });
        this.open = true;
      });
    },
    /** 查看追加服务 */
    // handleAppend(row) {
    //   const id = row.id;
    //   this.dialogType = 2;
    //   this.handleUpdate(id);
    // },
    /** 提交按钮 */
    submitForm(type) {
      //1分配
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let data = {};
          if (type == 1) {
            data = {
              id: this.form.id,
              merchId: this.form.merchId,
            };
          }
          if (this.form.id != null) {
            updateOrder(data).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addOrder(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal
        .confirm('是否确认删除服务订单编号为"' + ids + '"的数据项？')
        .then(function () {
          return delOrder(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => { });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "system/order/export",
        {
          ...this.queryParams,
        },
        `order_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>

<style>
.box-card {
  width: 450px;
}

.item {
  margin-bottom: 18px;
}
</style>
